<!DOCTYPE html>
<html>
<title>createImageBitmap + drawImage test</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<script src="/common/media.js"></script>
<script src="common.sub.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body>
<script>
function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo, flipped)
{
    var tolerance = 3;
    let topLeft = [255, 0, 0, 255];
    let topRight = [0, 255, 0, 255];
    let bottomLeft = [0, 0, 255, 255];
    let bottomRight = [0, 0, 0, 255];
    if (sourceIsVideo) {
        // The source video uses colors in the Rec.601 color space whose
        // values are close to full red, full green, full blue, and black,
        // but when converted to sRGB, are somewhat different.
        topLeft = [247, 37, 0, 255];
        topRight = [63, 251, 0, 255];
        bottomLeft = [28, 35, 255, 255];
        bottomRight = [5, 0, 2, 255];
    }
    if (flipped) {
        [topLeft, bottomLeft] = [bottomLeft, topLeft];
        [topRight, bottomRight] = [bottomRight, topRight];
    }
    const check = (x, y, [r, g, b, a]) =>
        _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
    check(1 * width / 4, 1 * height / 4, topLeft);
    check(3 * width / 4, 1 * height / 4, topRight);
    check(1 * width / 4, 3 * height / 4, bottomLeft);
    check(3 * width / 4, 3 * height / 4, bottomRight);
}

function testDrawImageBitmap(source, args = [], flipped, { resizeWidth = 20, resizeHeight = 20 } = {})
{
    let sourceIsVideo = source instanceof HTMLVideoElement;
    var canvas = document.createElement("canvas");
    canvas.width = resizeWidth;
    canvas.height = resizeHeight;
    var ctx = canvas.getContext("2d");
    return createImageBitmap(source, ...args).then(imageBitmap => {
        assert_equals(imageBitmap.width, resizeWidth);
        assert_equals(imageBitmap.height, resizeHeight);
        ctx.drawImage(imageBitmap, 0, 0);
        testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo, flipped);
    });
}

for (let { name, factory } of imageSourceTypes) {
    promise_test(function() {
        return factory().then(function(img) {
            const options = { imageOrientation: 'from-image' };
            return testDrawImageBitmap(img, [options], false);
        });
    }, `createImageBitmap from ${name} imageOrientation: "from-image", and drawImage on the created ImageBitmap`);

    promise_test(function() {
        return factory().then(function(img) {
            const options = { imageOrientation: 'flipY' };
            return testDrawImageBitmap(img, [options], true);
        });
    }, `createImageBitmap from ${name} imageOrientation: "flipY", and drawImage on the created ImageBitmap`);

}
</script>
</body>
</html>
